<template>
  <svg height="1200" width="1200" class="absolute-box" :style="[{ left: -svgLeft + 20 + 'px' }, { top: -svgTop + 'px' }]">
    <polygon class="svg" :points="points" data-id="112-ZL-1-52470381" style="stroke-width: 2; stroke: #000; fill: #fff"></polygon>

    <!-- <image v-if="model.positionX && model.type && model.type != 'isVacancy'" style="overflow: visible" width="15" height="15" :x="model.iconPotionX" :y="(model.positionY - 4) * 2" :xlink:href="model.industryUrl || setIcon(model.targetType) || iconUrl" class="quick-img font-size-s"></image>
    <text v-if="model.positionX" @click="pointClick(assets)" :x="model.positionX * 2" :y="model.positionY * 2" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ model.name }}</text>
    <text v-if="model.positionX" @click="pointClick(assets)" :x="model.positionX * 2" :y="(Number(model.positionY) + 15) * 2 - 17" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ model.leaserShopName }}</text>

    <text v-if="model.positionX && model.leaserShopName" @click="pointClick(assets)" :x="model.positionX * 2" :y="(Number(model.positionY) + 30) * 2 - 34" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ model.buildingArea }}m²</text>
    <text v-if="model.positionX && !model.leaserShopName" @click="pointClick(assets)" :x="model.positionX * 2" :y="(Number(model.positionY) + 15) * 2 - 17" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ model.buildingArea }}m²</text>

    <text v-if="model.positionX && model.leaserShopName" @click="pointClick(assets)" :x="model.positionX * 2" :y="(Number(model.positionY) + 45) * 2 - 51" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ model.rentUnitPrice || 0 | fmoneyThousand }}元/m²/日</text>
    <text v-if="model.positionX && !model.leaserShopName" @click="pointClick(assets)" :x="model.positionX * 2" :y="(Number(model.positionY) + 30) * 2 - 34" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ model.rentUnitPrice || 0 | fmoneyThousand }}元/m²/日</text> -->
  </svg>
</template>
<script>
  import $ from 'jquery';
  import lodash from 'lodash';

  export default {
    props: {
      points: {
        type: String,
        default: '',
      },

      model: {
        type: Object,
        default: null,
      },
    },

    watch: {
      points: {
        handler(val) {
          this.initSvgPosition();
        },
      },
    },

    data() {
      return {
        svgLeft: 0,
        svgTop: 0,
        iconUrl: require('@/common/imgs/yetai.png'),
        cangkuUrl: require('@/common/imgs/cangku.png'),
        xiezilouUrl: require('@/common/imgs/xiezilou.png'),
      };
    },

    mounted() {
      this.initSvgPosition();
    },

    methods: {
      initSvgPosition() {
        let pointers = $('.svg').attr('points');
        let pointersCoordArr = pointers.split(' ');
        let pointersArr = [];
        let pointersXArr = [];
        let pointersYArr = [];
        pointersCoordArr.forEach(item => {
          pointersArr.push(item.split(','));
        });
        pointersArr.forEach(item => {
          item[0] && pointersXArr.push(item[0] || 0);
          item[1] && pointersYArr.push(item[1] || 0);
        });
        this.svgLeft = lodash.min(pointersXArr);
        this.svgTop = lodash.min(pointersYArr);
      },

      //根据类型设置写字楼图标
      setIcon(type) {
        if (type == 8) {
          return this.cangkuUrl;
        } else if (type == 3) {
          return this.xiezilouUrl;
        } else {
          return '';
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .font-size-s {
    transform: scale(0.5, 0.5);
  }
  .center-box {
    margin: 0 auto;
  }
</style>
